import React, { useEffect, useState, Fragment } from 'react'
import { Button, Popover, Modal, Input, Dropdown, Popconfirm, message } from 'antd';

import styles from './index.module.css'

import { editTask } from '../../utils/axiosRequest/api'
import { getAllcronExpression } from '../../utils/axiosRequest/api'

import PubSub from 'pubsub-js'

function TaskStateBtn(props) {
    //父控件传过来的值
    const { taskInfo } = props;
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isPopoveropen, setPopoveropen] = useState(false);
    const [cronData, setCronData] = useState([]);

    //消息提示
    const [messageApi, contextHolder] = message.useMessage();

    //[]空数组相当于componentDidMount
    useEffect(() => {
        //返回的函数相当于unmountComponentAtNode
        queryCronExperssion();

        return () => {

        }
    }, []);


    function queryCronExperssion() {
        const params = new Map()
        getAllcronExpression(params)
            .then(response => {
                const data = response.data
                if (data.code === '000') {
                    handleCronData(data.data)
                } else {
                    //处理失败
                    messageApi.open({ type: 'error', content: data.des });
                }
            })
            .catch(error => {
                messageApi.open({ type: 'error', content: error.message });
            });
    }

    function handleCronData(data) {
        const tempData = [];
        const length = data.length;
        for (let i = 0; i < length; i++) {
            tempData.push({
                key: i,
                label: data[i].description,
                expression: data[i].cronExpression,
                id: data[i].id,
            })
        }
        //保存全量案件数据
        setCronData(tempData)
    }

    function showModal() {
        setIsModalOpen(true);
    };
    function handleOk() {
        setIsModalOpen(false);
        messageApi.open({ type: 'error', content: '对不起，该功能暂未开放' });
    };
    function handleCancel() {
        setIsModalOpen(false);
    };

    function clickEdit() {
        setPopoveropen(false);
        showModal();
    }

    function clickDelete() {

    }

    //item点击
    function clickCron(key) {

    };

    function publishMssage() {
        //发消息通知页面刷新-延迟执行，否则会影响弹框
        setTimeout(function () {
            PubSub.publish('delete-task-success', 'refresh-data');
        }, 500);
    }

    function deleteConfirm() {
        //删除任务
        setPopoveropen(false);
        const params = new Map()
        params.set('action', '1')
        params.set('taskId', taskInfo.taskId)
        editTask(params)
            .then(response => {
                const data = response.data
                if (data.code === '000') {
                    messageApi.open({ type: 'success', content: "删除成功" });
                    publishMssage();
                } else {
                    //处理失败
                    messageApi.open({ type: 'error', content: data.des });
                }
            })
            .catch(error => {
                messageApi.open({ type: 'error', content: error.message });
            });
    };

    function deleteCancel() {
        setPopoveropen(false);
    };

    function handleOpenChange(newOpen) {
        setPopoveropen(newOpen);
    };

    return (
        <Fragment>
            {contextHolder}
            <Modal loading={false} width={'30vw'} title="编辑任务" open={isModalOpen} okText="确认" cancelText="取消" onOk={handleOk} onCancel={handleCancel}>
                <div className={styles.modal_box}>
                    <p>任务id: {taskInfo.taskId}</p>
                    <p>任务描述: </p><Input defaultValue={taskInfo.description} placeholder="Filled" variant="filled" />
                    <p>CRON表达式：
                        <Dropdown menu={{ items: cronData, onClick: clickCron }} placement="bottom">
                            <Button>{taskInfo.cronExpression}</Button>
                        </Dropdown>
                    </p>
                </div>
            </Modal>
            <Popover onOpenChange={handleOpenChange} open={isPopoveropen} trigger="click" content={
                <div className={styles.popover_box}>
                    <Button onClick={clickEdit} variant="outlined" color="primary" size={'small'} style={{ marginTop: '5px' }}>编辑</Button>
                    <Popconfirm
                        title="删除任务"
                        description="是否确认删除任务？"
                        onConfirm={deleteConfirm}
                        onCancel={deleteCancel}
                        okText="是"
                        cancelText="否">
                        <Button onClick={clickDelete} type="primary" danger size={'small'} style={{ marginTop: '5px' }}>删除</Button>
                    </Popconfirm>
                </div>}>
                <Button type='primary'>{taskInfo.status}</Button>
            </Popover>
        </Fragment>
    )
}


export default TaskStateBtn

